<template>
  <div>
    <page-header title="接口权限"></page-header>
    <pageMain>
      <div class="chunk">
        <el-table :data="apiAuthList" stripe style="width: 100%">
          <el-table-column prop="type" label="类型" width="180">
          </el-table-column>
          <el-table-column prop="url" label="地址"> </el-table-column>
          <el-table-column prop="name" label="状态"> </el-table-column>
          <el-table-column prop="name" label="说明"> </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="140"
            align="center"
          >
            <template>
              <div class="table-options overall-flex">
                <el-link type="primary">编辑</el-link>
                <el-link type="danger">删除</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </pageMain>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";
import pageHeader from '~/page-header/page-header.vue'
import API from "@/api";
export default {
  components: {
    pageMain,pageHeader
  },
  data() {
    return {
      tableData: [],
      apiAuthList: [],
      pageData: {
        page: 1,
        limit: 1,
      },
    };
  },
  methods: {
    getData() {
      let { page, limit } = this.pageData;
      API.apiAuth
        .list({ page, limit })
        .then((res) => {
          console.log("获取接口权限列表成功");
          console.log(res);

          let { data } = res;

          this.apiAuthList = [];
          this.apiAuthList = data.list;
        })
        .catch((err) => {
          console.log("获取接口权限列表失败");
          console.log(err);
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}
.table-options {
  justify-content: space-around;
}
</style>
